<template>
	<view class="content reg-page">
		<view class="input-group">
			<view class="input-row border-bottom-1px" @click="uploadImgs">
				<view class="header">
					<text class="title fs-36">头像</text>
					<text class="tip fc-84 fs-24">简历助手：数据显示招聘者对真人头像更有好感。</text>
				</view>				
				<view class="head-img"><image :src=" userData.resumeHead|| userInfo.avatar"></image></view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">姓名</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userData.resumeName" placeholder="请输入姓名" :maxLength="30"></m-input>				
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">性别</text>
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value" style="margin-right: 16px;">
						<radio :value="item.value" color="#84C0F4" :checked="item.value == userData.resumeGender" /><span>{{item.label}}</span>
					</label>
				</radio-group>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">年龄</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userData.age" disabled placeholder="选择出生年月生成" :maxLength="5"></m-input>				
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">参加工作时间</text>
				<view class="picker">
					<picker mode="date" :value="userData.resumeBeginWorkTime" :start="startDate" :end="endDate" @change="bindDateChange">
						<input class="padding-10" placeholder="请选择参加工作时间" disabled :value="userData.resumeBeginWorkTime" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">微信号</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userData.resumeWechatNo" placeholder="请输入微信号" :maxLength="30"></m-input>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">出生年月</text>
				<view class="picker">
					<picker mode="date" :value="userData.resumeBirthDate" :start="startDate" :end="endDate" @change="bindBirthdayChange">
						<input class="padding-10" placeholder="请选择出生年月" disabled :value="userData.resumeBirthDate" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">邮箱（选填）</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userData.resumeEmail" placeholder="请输入邮箱" :maxLength="30"></m-input>				
				</view>
			</view>
		</view>
		<view class="btn-row"><button type="primary" class="primary" @tap="update">保存</button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import mInput from '@/components/m-input/m-input.vue';
import mCell from '@/components/m-cell/m-cell.vue';
import mpvuePicker from '@/components/mpvue-picker/mpvue-picker.vue';
import cityData from '@/common/cityData.js';
import graceChecker from '@/common/graceChecker.js';
import mCodedialog from '@/components/m-codedialog/m-codedialog.vue';
import formRuleConfig from '@/config/formRule.config.js';
import uploadImage from '@/common/ossutil/uploadFile';
import { formatDate, calCurrentYear } from '@/common/date';
export default {
	components: {mInput,mCell,mpvuePicker,mCodedialog},
	computed: {
		...mapState(['openId', 'customerInfo','userInfo']),
		startDate() {return this.getDate('start');},
		endDate() {return this.getDate('end');}
	},
	data() {
		const currentDate = this.getDate({format: true});
		const currentTime = this.getTime({format: true});//当前时间
		return {
			bindTimee: currentTime,
			resumeId:'',
			sex: [{
				label: "男",
				value:1,
				checked: true
			}, {
				label: "女",
				value:2
			}],
			imgSrcUrl: this.$mConfig.imgSrcUrl,
			date: currentDate,
			tmpImageUrl:'',
			userData:{
				resumeHead:'',//头像
				resumeName:'',//姓名
				resumeGender:1,//性别
				resumeBeginWorkTime:'',//参加工作时间
				resumeBirthDate:'',//出生年月
				age:'',
				resumeWechatNo:'',//微信号
				resumeEmail:'',//邮箱
			}
		};
	},
	onShow() {},
	onLoad(option) {
		this.resumeId = option.resumeId
		if(option.resumeId){
			this.getResumeDetail();
		}		
	},
	methods: {
		//获取信息
		async getResumeDetail(){				
			let res= await this.$apis.getResumeDetail(this.resumeId);
			if(res.msg =="操作成功"){
				res.data.resumeBeginWorkTime = res.data.resumeBeginWorkTime.slice(0,10)
				res.data.resumeBirthDate = res.data.resumeBirthDate.slice(0,10)
				res.data.age = this.getAge(res.data.resumeBirthDate)
				this.userData = res.data
			}
		},
		//参加工作时间
		bindDateChange: function(e) {
			this.userData.resumeBeginWorkTime = e.target.value;
		},
		//性别
		radioChange(e) {
			this.userData.resumeGender = this.radio = e.detail.value
		},
		//出生年月
		bindBirthdayChange: function(e) {
			this.userData.resumeBirthDate = e.target.value;
			this.userData.age = this.getAge(e.target.value);
		},
		// 计算年龄
		getAge(birthday) {
		    //出生时间 毫秒
		    var birthDayTime = new Date(birthday).getTime(); 
		    //当前时间 毫秒
		    var nowTime = new Date().getTime(); 
		    //一年毫秒数(365 * 86400000 = 31536000000)
		    return Math.ceil((nowTime-birthDayTime)/31536000000);
		},
		// 选择图片
		uploadImgs() {
			let that = this;
			uni.chooseImage({
				success(res) {
					let tempFilePaths = res.tempFilePaths;
					that.tmpImageUrl = tempFilePaths[0];
					that.uploadFile();
				}
			});
		},	
		// 上传头像
		uploadFile() {
			uni.showLoading({
				title: '图片上传中'
			});
			let that=this;
			uploadImage(0,this.tmpImageUrl, 'job/user/', result => {
				that.userData.resumeHead = result;
				uni.hideLoading();
			});
		},		
		// 保存
		async update() {
			if (!this.userData.resumeName) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				});
				return;
			}
			if (this.userData.resumeGender =='') {
				uni.showToast({
					icon: 'none',
					title: '请选择性别'
				});
				return;
			}
			if (!this.userData.resumeBeginWorkTime) {
				uni.showToast({
					icon: 'none',
					title: '请选择工作时间'
				});
				return;
			}
			if (!this.userData.resumeBirthDate) {
				uni.showToast({
					icon: 'none',
					title: '请选择出生年月'
				});
				return;
			}
			var infoUpdate={
				resumeHead:this.userData.resumeHead|| this.userInfo.avatar,//头像
				resumeName:this.userData.resumeName,//姓名
				resumeGender:this.userData.resumeGender,//性别
				resumeBeginWorkTime:this.userData.resumeBeginWorkTime +' '+ this.bindTimee+":00",//参加工作时间
				resumeBirthDate:this.userData.resumeBirthDate+' '+ this.bindTimee+":00",//出生年月
				age:this.userData.age,//年龄
				resumeWechatNo:this.userData.resumeWechatNo,//微信号
				resumeEmail:this.userData.resumeEmail,//邮箱				
			}
			/* uni.setStorageSync("userInfoData", infoUpdate);
			this.$store.commit('USER_InfoData', infoUpdate);	 */
			 this.$page.prePage().userData = infoUpdate;	
			uni.navigateBack({
				delta:1
			})
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		formatDates(time) {
			if (time == null || time === '') {
				return null;
			}
			let date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		// 获取当前时间
		getTime(type) {
			const date = new Date();
			let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			return `${hour}:${minute}`;
		},
	}
};
</script>

<style lang="scss" scoped>
.input-group {
	border-radius: 10upx;
	margin-top: 10upx;
	overflow: hidden;
	padding-bottom: 180rpx;
}

.input-row {
	display: flex;
	flex-direction: row;
	position: relative;
	background: #fff;
	justify-content: space-between;
	align-items: center;
	padding: 15upx 10upx;
}

.input-row .title {
	width: 25%;
	padding: 20upx 0;
	padding-left: 20upx;
	line-height: 50upx;
}

.border-bottom-1px {
	position: relative;

	&::after {
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: 0;
		left: 20upx;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e2e2e2;
	}
}

.header {
	display: flex;
	flex-direction: column;
	.tip {
		margin-left: 20upx;
	}
}

.head-img {
	margin-right: 15upx;
	image {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
	}
}

radio-group {
	margin-right: 10upx;
}

.radio {
	margin-left: 20upx;
}

.input-column {
	display: flex;
	flex-direction: column;
	background-color: $bgcolor_white;
	padding: 30upx 20upx 10upx 20upx;

	.title {
		margin-left: 10upx;
	}

	.input-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.picker {
		padding: 30upx 0 20upx 0;
		margin-left: 10upx;
		position: relative;
		picker {
			font-size: $uni-font-size-lg;
			width: 100%;
			position: absolute;
		}
	}
	.yzb-next {
		float: right;
		color: $font-color-999;
	}
}

.content {
	background: $bgcolor_white;
}

.btn-row {
	position: fixed;
	bottom: 10upx;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;	
	z-index: 2;
	button {
		background-color: #84C0F4;
		height: 90upx;
		line-height: 90upx;
		font-size: $font-size-34;
		width: 90%;
		margin: 0 auto;
		display: block;
	}
}
</style>
